@import './sass/variable';

$color:#178743;
.nineflex {
	img{
		height: 25rem / $baseFontSize;
	}
	ul{
		display: flex;
		justify-content: left;
		align-items:center;
		display: -webkit-flex;
		flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
		overflow: hidden;

		li{
			//flex: 33%;
			width: 33%;
			text-align: center;
			margin-bottom: 1px;
			border-right: 1px solid $borColor;
			border-bottom: 1px solid $borColor;
			display: block;
			padding: 30rem / $baseFontSize 0;
			color: $color;

			// &:last-child{

			// 	span{
			// 		color: rgb(250, 250, 250)!important;
			// 	}
			// }

			span{
				display: block;
				text-align: center;
				font-size: 15rem / $baseFontSize;
				margin-top: 10rem / $baseFontSize;
				color: #333333;
			}

			i{
				font-size: 30rem / $baseFontSize;
			}
		}
	}
}

.search{
	background: #f2f2f2;
	padding: 10rem / $baseFontSize;
	color: $color;
	position: relative;
	border-bottom: 1px solid #eee;

	i{
		font-size: 25rem / $baseFontSize;
	    vertical-align: middle;
	}

	.so{
		border: none;
		border: 1px solid $borColor;
		padding: 8rem / $baseFontSize 12rem /$baseFontSize 7rem / $baseFontSize;
		border-radius: 10px;
		outline: none;
		width: 62%;
		vertical-align: middle;
	}

	.soadd{
		position: absolute;
		top: 4rem / $baseFontSize;
		bottom: 0;
		line-height: 3.5rem;
		padding: 5rem / $baseFontSize;
		right: 10rem / $baseFontSize;
		font-size: 30rem / $baseFontSize;
	}
	.sosearch{
		position: absolute;
		top: 4rem / $baseFontSize;
		bottom: 0;
		line-height: 3.5rem;
		padding: 5rem / $baseFontSize;
		right: 50rem / $baseFontSize;
		font-size: 30rem / $baseFontSize;
	}
}

.nmlist {
	
	&>p{
		padding: 5rem / $baseFontSize 15rem / $baseFontSize 5rem / $baseFontSize 25rem / $baseFontSize;
		border-bottom: 1px solid $borColor;
		height: 25rem / $baseFontSize;
		line-height: 25rem / $baseFontSize;
		border-top: 1px solid $borColor;
		i{
			font-size: 22rem / $baseFontSize;
			float: right;
			padding-top: 4rem / $baseFontSize;
			color: $priGreen;
		}
	}

	li:last-child{
		margin-bottom: 0rem;
	}
	li{
		border-bottom: 1px solid $borColor;
		padding-left: 15rem / $baseFontSize;
		background: #fff;
		position: relative;
		margin-bottom: 10rem / $baseFontSize;

		p{
			padding: 10rem / $baseFontSize;
			border-bottom: 1px solid $borColor;
			&:after{
				display: block;
				content: '';
				clear: both;
			}
			&>b{
				float: left;
				max-width: 65%;
				font-size: 14rem / $baseFontSize;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: normal;
				display: inline-block;
			}

			.stateover{
				float: right;
				display: inline-block;
				padding-right: 10rem / $baseFontSize;
				
				b{
					border: 1px solid #f00;
					color: #f00;
					padding: 2px 5px;
					border-radius: 2px; 
					font-weight: normal;
				}
			}

			&+span{
			display: block;
			padding: 10rem / $baseFontSize;
			color: #333;
			i{
				font-size: 20rem / $baseFontSize;
				float: right;
				color: #ccc;
				margin-right: 10rem / $baseFontSize;
				vertical-align: middle;
				margin-left: 10rem / $baseFontSize;
			}
		}
		}
	}
}

.companypic{
	display: inline-block;
    text-align: center;
    color: #178743;
    border: dashed 2.8px;
    padding: 1.3rem 1.4rem;
    margin: 1rem;

	i{
		font-size: 40rem / $baseFontSize;
		display: inline-block;
	}
}
.savebtn{
	padding: 10rem / $baseFontSize 15rem / $baseFontSize;
	display: flex;
	display: -webkit-flex;

	button{
		flex:1;
		border: none;
		background: $color;
		color: #fff;
		display: inline-block;
		text-align: center;
		padding: 12rem / $baseFontSize;
		font-size: 16rem / $baseFontSize;
		outline: none;
		border-radius: 5rem / $baseFontSize;

		& + button{
			border-left: 1px solid #00763A;
			margin-left: 5rem / $baseFontSize;
		}
	}
}
.uploadimage{
	ul{
		// display: flex;
		// display: -weblit-flex;
		// flex-flow:wrap;
		display: inline-block;
		li{
			//flex:0 0 33%;
			display: inline-block;
			padding: 5rem / $baseFontSize;
			box-sizing:border-box;
			position: relative;
			width:25%;
			float:left;
			img{
				width: 100%;
				height: 75rem / $baseFontSize;
			}
			img + i{
				position: absolute;
				font-size: 25rem / $baseFontSize;
				right: -5rem / $baseFontSize;
				top: -5rem / $baseFontSize;
				color: #f00;
				z-index: 99;
			}
		}
	}
}

.form-namenormal{
	padding: 0 0 15rem / $baseFontSize 0;
	
	div{
		width:50%;
		display: inline-block;
		box-sizing:border-box;
		float: left;
		p{
			display: inline-block;
			width: 44%;
			text-align: right;
		}
		span{
			display: inline-block;
			color: #666666;
		}
	}
}

.linegray{
	border-bottom: 1px solid $borColor;
	margin-bottom: 10rem / $baseFontSize;
}
.employee_ul{
	margin-left: 22%;
	background: #f7f7f7;
	li{
		margin-top: 10rem / $baseFontSize;
		line-height: 24rem / $baseFontSize;
		border-bottom: 1px dashed #e8e8e8;
		padding: 5rem / $baseFontSize 10rem / $baseFontSize;
		&+li{
			margin-top: 0;
		}
	}
}

.form-table{
	textarea{
		width: 80%;
		padding: 10rem / $baseFontSize;
	    height: 100%;
    	vertical-align: middle;
    	border: 1px solid $borColor;
	}
	i{
		color: #f00;
		font-size: 20rem / $baseFontSize;
	}
}
.addalert{
	display: block;
	width: 100%;
	line-height: 20rem / $baseFontSize;
	color: $priGreen;
	i{
		padding: 2rem / $baseFontSize 5rem / $baseFontSize;
		font-size: 20rem / $baseFontSize;
		background: #fff;
		border: 1px solid $priGreen; 
		color: $priGreen;
		//margin-right: 10rem / $baseFontSize;
		float: right;
		border-radius: 50%;
	}
}
.accidentcont{
	.accidentul p{
		display: flex;
		display: -webkit-flex;
		span{
			display: block;
			border-bottom: 1px solid $borColor;
			border-top: 1px solid $borColor;
			flex:50%;
			text-align: center;
			line-height: 40rem / $baseFontSize;
			&:last-child{
				border-left: 1px solid $borColor;
			}

			&.active{
				background: #f2f2f2;
			}
		}
	}
}
.safeAccident{
	ul li{
		padding: 15rem / $baseFontSize;
		border-bottom: 1px solid $borColor;
	}
}
.safeParent,.alertParent{
	background: #fff;
	border-top: 1px dashed #ccc;
	padding: 5rem / $baseFontSize 20rem / $baseFontSize;
	margin-bottom: 10rem / $baseFontSize;
	i{
		float: right;
		font-size: 20rem / $baseFontSize;
		color: #f00;
	}
	p{
		padding: 10rem / $baseFontSize 5rem / $baseFontSize;
		border-bottom: 1px solid $borColor;
		color: $priGreen;
		
	}
	ul li{
		padding: 10rem / $baseFontSize 5rem / $baseFontSize;
		background: #fff;
	}
}
.btn_list{
	padding: 10rem / $baseFontSize;
	text-align: right;
	button{
		border: none;
		padding: 5rem / $baseFontSize;
	}
}
.carPosition{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	left: 0;
	top: 0;
	z-index: 100;

	.dialog-content{
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		min-width: 60%;
		background: #fff;
		padding:20rem / $baseFontSize;

		.title{
			border-bottom: 1px solid $borColor;
			padding-bottom: 10rem / $baseFontSize;
			text-indent: 10rem / $baseFontSize;
		}
		.options{
			padding: 10rem / $baseFontSize 10rem / $baseFontSize;
			display: flex;
			display: -webkit-flex;
			flex-wrap:wrap;
			label{
				flex:100%;
				display: inline-block;
				padding: 5rem / $baseFontSize 0; 
			} 
			
		}
		.dialog-footer{
			text-align: right;
			border-top: 1px solid $borColor;
			padding-top: 10rem / $baseFontSize;
		}
	}

	
}

.checkAnsower{
	p{
		padding: 10rem / $baseFontSize;
		border-bottom: 1px dashed #cccccc; 
		background: #f2f2f2;
		color: $priGreen;


		i{
			float: right;
			vertical-align: middle;
			margin-top: 3rem / $baseFontSize;
		}
	}

	ul{
		li{
			padding: 5rem / $baseFontSize;
			i {
				display: none;
				position: relative;
			    top: -2px;
			    left: 0px;

			}
			span{
				display: block;
				margin-bottom: 10rem / $baseFontSize;
			}
			.radioBox {
				input[type="radio"]:disabled:checked {
					display:none;
				}
			} 
		}
	}
}
.tipscar{
	padding: 10rem / $baseFontSize 15rem / $baseFontSize;
	font-size: 14rem / $baseFontSize;
}


// 人员列表
.userlist-cont{
	.usertitle{
		padding: 5rem / $baseFontSize 15rem / $baseFontSize;
		border-top: 1px solid $borColor;
	}
	.user_list{

		&.accidents{
			ul{
				li{
					padding: 15rem / $baseFontSize;
				}
			}
		}
		background: #fff;
		margin-bottom: 60rem / $baseFontSize;
		ul{
			li{
				padding: 10rem / $baseFontSize 15rem / $baseFontSize;
				border-bottom: 1px solid $borColor;
				position: relative;
				p{
					font-size: 16rem / $baseFontSize;
				}
				span{
					display: inline-block;
					font-size: 14rem / $baseFontSize;
					margin-top: 5rem / $baseFontSize;
					color: #333;
				}
				i{
					display: inline-block;
					position: absolute;
					right: 20rem / $baseFontSize;
					top: 50%;
					transform:translate(0,-50%);
					font-size: 24rem / $baseFontSize;
					color: #ccc;
				}

				&.checked{
					i{
						color: $priGreen;
					}
				}
			}

		}
	}
}



.savebtn{
	padding: 10rem / $baseFontSize 15rem / $baseFontSize;
	display: flex;
	display: -webkit-flex;

	button{ 
		flex:1;
		border: none;
		background: $color;
		color: #fff;
		display: inline-block;
		text-align: center;
		padding: 12rem / $baseFontSize;
		font-size: 16rem / $baseFontSize;
		outline: none;
		border-radius: 5rem / $baseFontSize;
		
		& + button{
			border-left: 1px solid #00763A;
			margin-left: 5rem / $baseFontSize;
		}
	}
}
.totleandok{
	position: fixed;
	bottom: 0;
	background: #fff;
	box-sizing:border-box;
	width: 100%;
	z-index: 1;
	display: flex;
	display: -webkit-flex;
	padding: 10rem / $baseFontSize 15rem / $baseFontSize;

	border-top: 1px solid $borColor;
	button{
		flex:1;
		border: none;
		background: #d2d2d2;
		color: $priGreen;
		display: inline-block;
		text-align: center;
		padding: 12rem / $baseFontSize;
		font-size: 16rem / $baseFontSize;
		outline: none;
		border-radius: 5rem / $baseFontSize;
		&.shureok{
			background: $priGreen;
			color: #fff;
			border-left: 1px solid #00763A;
			margin-left: 5rem / $baseFontSize;
		}
	}
}
#addaccident{
	padding: 4rem / $baseFontSize 13rem / $baseFontSize; 
    background-color: #ddd;
}

.form-group .form-dategroup .form-control{
	margin-top: 0;
}
.form-group.form-flabel label{
	margin-top: 0;
}

.form-cont .form-baseinput .form-group{
	&.checkedclass{
		padding: 15rem / $baseFontSize 10rem / $baseFontSize;
		
	}

	&.inputfull{
		label{
			width: 40%;
			float: left;
			padding-top: 9rem / $baseFontSize;
		}
		.form-control{
			height: 40rem / $baseFontSize;
			line-height: 40 rem / $baseFontSize;
			width: 55%;
			float: left;
			margin-top: 0;
		}
	}
}

.form-cont .form-baseinput .form-check-full{
	padding-right: 10rem / $baseFontSize;
	select{

	}
}
.form-checkmuch{
	padding: 10rem / $baseFontSize 20rem / $baseFontSize;
	label{
		margin-bottom: 5rem / $baseFontSize;
		margin-right: 10rem / $baseFontSize;
	}
}
.bordernone{
	input,select,textarea{
		border: none;
	}
	textarea{
		padding-left: 0;
	}
}
.radioallcont{
	padding: 10rem / $baseFontSize 15rem / $baseFontSize;
}
.formline .width30{
	width: 30%;
	& + p {
		display: inline-block;
		color: #555;
	}
}
.jranoedit label{
	margin-bottom: 6rem/ $baseFontSize;
	float: left;
}
.form-cont{
	fieldset{
		legend{
			padding: 15rem / $baseFontSize;
			border-top: 1px solid $borColor;
			background: #eefbf2;
			width: 100%;
			font-size: 16rem / $baseFontSize;
			box-sizing:boder-box;
			-webkit-box-sizing:border-box;
			i{
				float: right;
				font-size: 20rem / $baseFontSize;
			}
		}
	}
}
.hideUl{
	li{
		strong{
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    font-weight: normal;
		    max-width: 40%;
		    display: inline-block;
		    float: left;
		}
	}
}
.jraulli{
	ul{
		li{
			padding: 15rem / $baseFontSize;
			border-bottom: 1px solid $borColor;
			.before_other{
				p{
					padding: 10rem / $baseFontSize;
					padding-left: 0;
				}
			}

		}
	}
	.remark_brfore{
		padding: 10rem / $baseFontSize;
		font-size: 10rem / $baseFontSize;
		line-height: 20rem / $baseFontSize;
		color: #f00;
	}
}
.before_radio{
	margin-top: 10rem / $baseFontSize;
	display: flex;
	display: -webkit-flex;
	label{
		flex:1;
		text-align: left;
	}

}
.labellarge{
	label{
		width: 30%;
	}
	.form-control{
		width: 60%;
	}
}
.roadblack{
	p{
		display: flex;
		display: -webkit-flex;
		span{
			flex:1;
			text-align: center;
			line-height: 40rem / $baseFontSize;
			display: inline-block;
			border-right: 1px solid $borColor;
			background: #fff;
			border-top: 1px solid $borColor;
			border-bottom:1px solid $borColor; 
			&:last-child{
				border-right: none;
			}

			&.active{
				background: #f8f8f8;
				box-shadow: inset 0px 0px 8px 1px rgba(0,0,0,0.1)
			}
		}
	}
}
.delclass{
	padding: 5rem / $baseFontSize 10rem / $baseFontSize;
	button{
		width: 20%;
		border: none;
		background: $color;
		color: #fff;
		display: inline-block;
		text-align: center;
		padding: 10rem / $baseFontSize;
		font-size: 16rem / $baseFontSize;
		outline: none;
		border-radius: 5rem / $baseFontSize;
		float: right;
		font-size: 14rem / $baseFontSize;
	}
}